<!DOCTYPE html>
<html>
<head>
    <title>Cookies</title>
</head>
<body>
    <script type="text/javascript">
         // Note that we are setting `SameSite=None;` in this example because the example
// needs to work cross-origin.
// It is more common not to set the `SameSite` attribute, which results in the default,
// and more secure, value of `SameSite=Lax;`
document.cookie = "test2=World; SameSite=None; httponly=false; ";

const cookieValue = document.cookie
  .split("; ")
  .find((row) => row.startsWith("test2="))
  ?.split("=")[1];

function showCookieValue() {
  const output = document.getElementById("cookie-value");
  output.textContent = `> ${cookieValue}`;
}

function clearOutputCookieValue() {
  const output = document.getElementById("cookie-value");
  output.textContent = "";
}

    </script>
    <button onclick="showCookieValue()">Show cookie value</button>

    <button onclick="clearOutputCookieValue()">Clear</button>
    
    <div>
      <code id="cookie-value"></code>
    </div>
    
</body>
</html>